<button nz-button nzType="primary" (click)="showNew(null)">新增</button>
<!-- <button
  nz-button
  nzType="primary"
  nzDanger
  (click)="delLevels()"
  [disabled]="treeService.checklistSelection.selected.length === 0"
>
  删除
</button> -->
<button nz-button nzType="primary" (click)="showReportRoleTree()">
  职级汇报线
</button>

<nz-divider nzOrientation="left" nzText=""></nz-divider>

<div nz-row>
  <div nz-col [nzSpan]="18" [nzPush]="6">
    <nz-card nzTitle="基本信息" nzSize="small" [nzExtra]="extraTemplate">
      <div nz-row>
        <div nz-col nzSpan="8">
          名称：{{
            selectedLevel?.name
          }}
        </div>
        <div nz-col nzSpan="8">
          代码：{{
            selectedLevel?.code
          }}
        </div>
        <div nz-col nzSpan="8">
          汇报对象：

            <nz-tag
            nzColor="blue"
            [nzMode]="'closeable'"
            (nzOnClose)="onTagClose(parent)"
            *ngFor="let parent of selectedLevel?.parents"
          >
          {{ parent.name }}
          </nz-tag>

          <a nz-tooltip nzTooltipTitle="设置汇报对象" (click)="showReportLine()"
            ><i nz-icon nzType="edit" nzTheme="outline"></i
          ></a>
        </div>
        <div nz-col nzSpan="8">
          所属组织：
          <nz-tag
          nzColor="blue"
          [nzMode]="'closeable'"
          (nzOnClose)="onTagClose(org)"
          *ngFor="let org of selectedLevel?.parentOrgs"
        >
        {{ org.name }}
        </nz-tag>
          <a nz-tooltip nzTooltipTitle="设置汇报对象" (click)="showParentOrgs()"
            ><i nz-icon nzType="edit" nzTheme="outline"></i
          ></a>
        </div>
        <div nz-col nzSpan="8">
          创建时间：{{
            selectedLevel?.createdDate
          }}
        </div>
        <div nz-col nzSpan="8">
          创建者：{{
            selectedLevel?.createdBy
          }}
        </div>
        <div nz-col nzSpan="8">
          最后更新时间：{{
            selectedLevel?.modifiedDate
          }}
        </div>
        <div nz-col nzSpan="8">
          最后更新者：{{
            selectedLevel?.modifiedBy
          }}
        </div>
      </div>
    </nz-card>
    <ng-template #extraTemplate>
      <ng-container *ngIf="treeService.selectListSelection.selected.length > 0">
        <a nz-tooltip nzTooltipTitle="编辑" (click)="showNew(treeService.selectListSelection.selected[0])"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
        <a nz-tooltip nzTooltipTitle="删除" (click)="delete(selectedLevel)"
        ><i
          nz-icon
          nzType="delete"
          nzTheme="outline"
          [nzTheme]="'twotone'"
          [nzTwotoneColor]="'red'"
        ></i
      ></a>
      </ng-container>
    </ng-template>
  </div>

  <div nz-col [nzSpan]="6" [nzPull]="18">
    <nz-tree-view [nzTreeControl]="treeService.treeControl" [nzDataSource]="dataSource">
      <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodeIndentLine>
        <!-- <nz-tree-node-checkbox
          [nzDisabled]="node.expandable || node.type === 'ORG'"
          [nzChecked]="treeService.checklistSelection.isSelected(node)"
          (nzClick)="treeService.leafItemSelectionToggle(node)"
        >
        </nz-tree-node-checkbox> -->
        <nz-tree-node-option
          [nzDisabled]="node.type === 'ORG'"
          [nzSelected]="treeService.selectListSelection.isSelected(node)"
          (nzClick)="onItemSelect(node)"
        >
          {{ node.label }}
        </nz-tree-node-option>
      </nz-tree-node>

      <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
        <nz-tree-node-toggle *ngIf="!node.loading">
          <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
        </nz-tree-node-toggle>
        <nz-tree-node-toggle *ngIf="node.loading" nzTreeNodeNoopToggle>
          <i nz-icon nzType="loading" nzTreeNodeToggleActiveIcon></i>
        </nz-tree-node-toggle>
        <!-- <nz-tree-node-checkbox
          [nzDisabled]="node.expandable || node.type === 'ORG'"
          [nzChecked]="treeService.descendantsAllSelected(node)"
          [nzIndeterminate]="treeService.descendantsPartiallySelected(node)"
          (nzClick)="treeService.itemSelectionToggle(node)"
        ></nz-tree-node-checkbox> -->
        <nz-tree-node-option
          [nzDisabled]="node.type === 'ORG'"
          [nzSelected]="treeService.selectListSelection.isSelected(node)"
          (nzClick)="onItemSelect(node)"
        >
          {{ node.label }}
        </nz-tree-node-option>
      </nz-tree-node>
    </nz-tree-view>
  </div>
</div>

<nz-modal
  [(nzVisible)]="isNewVisible"
  nzTitle="新增"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="submitForm()"
>
  <nz-content *nzModalContent>
    <form
      nz-form
      nzLayout="vertical"
      [formGroup]="validateForm"
    >
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="请输入名称" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="请输入代码" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>请选择所属组织：</nz-form-label>
        <app-level-search></app-level-search>
      </nz-form-item>
    </form>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isReportLineVisible"
  nzTitle="设置汇报对象"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="saveReportLine()"
>
  <nz-content *nzModalContent>
    <app-level-search></app-level-search>
  </nz-content>
</nz-modal>

<nz-modal
  [nzFooter]="null"
  [(nzVisible)]="isRoleReportTree"
  nzTitle="职级汇报线"
  (nzOnCancel)="handleCancel()"
>
  <nz-content *nzModalContent>
    <app-level-tree></app-level-tree>
  </nz-content>
</nz-modal>

